 /*
 * @description: phone
 * @Author: along
 * @Date: 2021-06-11
 * @Last Modified by: along
 * @Last Modified time: 2021-06-11
 */

<template>
    <div
        class="phone"
        id="phone"
        :style="{background: '#ffffff', marginBottom: bottom < 0 ? 0 : bottom + 'px'}"
    >
        <!-- <tab
            :config="config"
            @emit="fnShowEdit"
            id="tab"
            :style="{border: type == 0 ? '1px solid #1890FF' : ''}"
        /> -->
        <!-- 编辑选择组件 -->
        <div
            v-if="list.length > 0"
            class="assemblyList"
        >
            <draggable
                v-model="dataList"
                @end="end"
                animation="200"
            >
                <div
                    v-for="(option,i) in dataList"
                    :key="i"
                    class="assembly"
                >
                    <!-- 单列图片 -->
                    <single-column
                        v-if="option.type == 1"
                        :baseconfig="option"
                        :index="i"
                        @emit="fnShowEdit"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : ''
                        }"
                    />
                    <!-- 多图拼凑 -->
                    <multi-column
                        v-if="option.type == 2"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : ''
                        }"
                    />
                    <!-- 新人专区 -->
                    <new-people
                        v-if="option.type == 7"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : '',
                            paddingTop: isTop.includes(option.type) ? '15px' : '0'
                        }"
                    />
                    <!-- 秒杀专区 -->
                    <!-- <flash-sale
                        v-if="option.type == 102"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    /> -->
                    <!-- 临期商品 -->
                    <near-exp
                        v-if="option.type == 8"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : '',
                            paddingTop: isTop.includes(option.type) ? '15px' : '0'
                        }"
                    />
                    <!-- 折扣专区 -->
                    <discount-link
                        v-if="option.type == 9"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : '',
                            paddingTop: isTop.includes(option.type) ? '15px' : '0'
                        }"
                    />
                    <!-- 0元购 -->
                    <!-- <free-list
                        v-if="option.type == 105"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    /> -->
                    <!-- 抽奖专区 -->
                    <!-- <lottery-link
                        v-if="option.type == 106"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    /> -->
                    <!-- 活动专区 -->
                    <active-list
                        v-if="option.type == 10"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : '',
                            paddingTop: isTop.includes(option.type) ? '15px' : '0'
                        }"
                    />
                    <!-- 豆腐块 -->
                    <active-item
                        v-if="option.type == 12"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{
                            border: id == i ? '1px solid #1890FF' : '',
                            paddingTop: isTop.includes(option.type) ? '15px' : '0'
                        }"
                    />
                </div>
            </draggable>
        </div>

        <!-- 提示浮层 -->
        <div
            v-if="value_type"
            class="phone-dialog"
            :style="{top: top + 'px'}"
        >
            {{ type | filterType }}
        </div>

        <!-- 操作浮层 -->
        <div
            v-if="value_type"
            class="phone-side"
            :style="{top: top + 'px'}"
        >
            <i
                class="iconfont el-icon-hand-xiangshang1"
                v-if="id > 0"
                @click="handleUp()"
            />
            <i
                class="iconfont el-icon-hand-xiangxia1"
                v-if="id < list.length - 1"
                @click="handleDown()"
            />
            <i
                class="iconfont el-icon-hand-shanchu1"
                @click="handleDelete()"
            />
        </div>

        <!-- 无组件 -->
        <div
            v-if="list.length == 0"
            class="phone-view"
        >
            <img
                src="@/assets/image/control-image.png"
                class="phone-view-image"
            >
            <p class="phone-view-desc">您还未添加任何模块</p>
            <p class="phone-view-desc">请点击添加左侧模块到这里开始装修</p>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import tab from '@/components/active-home/tab.vue';
import singleColumn from '@/components/active-home/single-column.vue';
import multiColumn from '@/components/active-home/multi-column.vue';
import newPeople from '@/components/active-home/new-people.vue';
import flashSale from '@/components/active-home/flash-sale.vue';
import nearExp from '@/components/active-home/near-exp.vue';
import discountLink from '@/components/active-home/discount-link.vue';
import freeList from '@/components/active-home/free-list.vue';
import lotteryLink from '@/components/active-home/lottery-link.vue';
import activeList from '@/components/active-home/active-list.vue';
import activeItem from '@/components/active-home/active-items.vue';
export default {
    name: 'Phone',
    components: {
        draggable,
        tab,
        singleColumn,
        multiColumn,
        newPeople,
        flashSale,
        nearExp,
        discountLink,
        freeList,
        lotteryLink,
        activeList,
        activeItem
    },
    props: {
        list: {
            type: Array,
            default: () => {}
        },
        nowid: {
            type: Number,
            default: () => {}
        },
        bottom: {
            type: Number,
            default: () => {}
        },
        config: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        value_type () {
            return [
                1,
                2,
                7,
                8,
                9,
                10,
                12
            ].includes(Number(this.type));
        },
        isTop () {
            return [
                7,
                8,
                9,
                10,
                12
            ];
        }
    },
    data () {
        return {
            type: 0,//当前选中组件
            top: 0,//浮层相对顶部距离(用于左侧浮层)
            phoneTop: 0,//手机距离顶部距离(用于左侧浮层)
            id: -1,//当前选择组件的位置
            dataList: this.list,//拷贝list数据，避免直接修改父组件数据
        };
    },
    filters: {
        filterType (val) {
            if (val == 1) {
                return '单列图片';
            } else if (val == 2) {
                return '多图拼凑';
            } else if (val == 7) {
                return '新人专享';
            } else if (val == 8) {
                return '临期商品';
            } else if (val == 9) {
                return '折扣专区';
            } else if (val == 10) {
                return '活动专区';
            } else if (val == 12) {
                return '豆腐块';
            }
        }
    },
    watch: {
        dataList (val) {
            this.$emit('send', this.dataList);
            // console.log('监听数据变化同步给父组件', this.dataList);
        },
        list (val) {
            this.dataList = this.list;
        },
        type (val) {
            this.getTop(this.nowid);
        },
        nowid (val) {
            this.id = val;
            this.getTop(this.nowid);
            // console.log('nowid', this.nowid);
        }
    },
    methods: {
        /**
         * @description 获取浮层距离顶部距离
         */
        getTop (type) {
            let list = document.querySelectorAll('.assembly');
            let height = [];
            let num = 0;


            for(let key=0; key<list.length; key++) {
                height.push(list[key].getBoundingClientRect().height);
            }

            if(this.type == 0) {
                this.top = 70;
                let bottom = 703 + this.top - document.querySelector('.assemblyList').getBoundingClientRect().height;//距离底部距离

                this.$emit('top', {
                    top: 0,
                    bottom: bottom
                });
            } else {
                height.forEach((option,i) => {
                    if(i < type) {
                        num += option;
                    }
                });
                this.top = 90 + num;

                let bottom = 703 + this.top - document.querySelector('.assemblyList').getBoundingClientRect().height;//距离底部距离

                this.$emit('top', {
                    top: this.top,
                    bottom: bottom
                });
            }

        },

        /**
         * @description 点击组件 展示右侧编辑区域
         */
        fnShowEdit (object) {
            console.log('--object--', object);
            this.type = object.type;
            this.$emit('showEdit', object);

            //设置id，用于定位当前点击位置
            this.id = object.index;
        },

        /**
         * @description 监听拖拽事件
         */
        end (object) {
            this.getTop(object.newIndex);
            this.$emit('addid', object.newIndex);
        },

        /**
         * @description 组件排序 上移
         */
        handleUp () {
            this.dataList.splice(this.nowid - 1, 0, this.dataList[this.nowid]);
            this.dataList.splice(this.nowid + 1, 1);
            this.getTop(this.nowid - 1);
            this.$emit('addid', this.nowid - 1);
        },

        /**
         * @description 组件排序 下移
         */
        handleDown () {
            this.dataList.splice(this.nowid + 2, 0, this.dataList[this.nowid]);
            this.dataList.splice(this.nowid, 1);
            this.getTop(this.nowid + 1);
            this.$emit('addid', this.nowid + 1);
        },

        /**
         * @description 删除当前组件
         */
        handleDelete () {
            this.type = 0;//隐藏控件
            this.dataList.splice(this.id, 1);
            this.$emit('delete', 'delete' + new Date().getTime());

            setTimeout(() => {
                this.fnShowEdit({
                    type: -1,
                    index: -1
                });
            },100);
        }
    }
};
</script>

<style lang="less" scoped>
.phone {
    width: 375px;
    // height: 703px;
    min-height: 703px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(153, 169, 192, 0.2);
    margin-top: 24px;
    position: relative;
    // margin-bottom: 700px;
    .assemblyList {
        width: 375px;
        flex: 1;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 0px;
        }
    }
    //组件
    .assembly {
        width: 375px;
        display: flex;
        flex-direction: column;
        cursor: move;
        &:hover>div {
            border: 1px #1890FF dashed;
        }
    }
    //浮层
    .phone-dialog {
        width: 25px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 15px;
        padding: 10px 5px;
        color: #A2A2A2;
        font-size: 12px;
        position: absolute;
        left: -40px;
        z-index: 99;
        margin: 0 auto;
        line-height: 16px;
        text-align: center;
        transition: .2s;
    }
    //操作区
    .phone-side {
        width: 30px;
        background: #ffffff;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        box-sizing: border-box;
        position: absolute;
        right: -45px;
        z-index: 99;
        transition: .2s;
        i {
            color: #333333;
            font-size: 18px;
            margin-bottom: 12px;
        }
    }
    // 无数据
    .phone-view {
        margin-top: 128px;
        width: 375px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .phone-view-image {
            width: 165px;
            height: 201px;
            margin-bottom: 20px;
        }
        .phone-view-desc {
            color: #999999;
            font-size: 12px;
            line-height: 18px;
        }
    }
}
</style>